<template>
  <view class="deposit-container">
    <mt-navbar :show-back="true" :title="title" :bg-color="bgColor">
      <template #right>
        <view class="flex flex-items-center" @click="handleOpenRecord">
          <uv-icon name="clock" color="#727687" size="16" class="mr-12rpx mt-4rpx"></uv-icon>
          <text class="text-#727687 fw-400 text-24rpx">充值记录</text>
        </view>
      </template>
    </mt-navbar>

    <view class="mt-16rpx">
      <uv-form ref="depositFormRef" label-position="left" label-width="auto" :rules="rules" :model="depositForm">
        <view class="bg-#ffffff px-32rpx pb-82rpx pt-32rpx">
          <view class="mt-32rpx flex flex-col">
            <text class="text-#1C213E text-32rpx fw-400">充值金额</text>
            <view class="unit flex flex-items-center mt-56rpx ml-72rpx">
              <uv-line
                v-if="depositForm.info.orderAmount && depositForm.info.orderAmount.length <= 9 && depositForm.info.orderAmount >= 1"
                direction="col"
                length="15"
                color="#727687"
              ></uv-line>
              <text class="text-#727687 text-28rpx fw-400 ml-16rpx">{{ unitFormat(depositForm.info.orderAmount) }}</text>
            </view>
          </view>
          <uv-form-item prop="info.orderAmount" class="pb-22rpx" style="border-bottom: 1px solid #e6e6e6">
            <text class="text-#1C213E text-56rpx fw-600">￥</text>
            <view class="w-100%" style="position: relative">
              <uv-input v-model="depositForm.info.orderAmount" font-size="40px" border="none" placeholder="请输入金额" maxlength="9"> </uv-input>
            </view>
          </uv-form-item>
        </view>
      </uv-form>
      <!-- <mt-button class="w-100% mt-56rpx" style="border-radius: 192rpx" @click="handleSubmit">确认修改</mt-button> -->
    </view>

    <view class="flex items-center justify-between px-32rpx fixed h-116rpx left-0 right-0 bottom-16rpx safety-8">
      <mt-button class="flex-1" @click="handleSubmit">充值</mt-button>
    </view>
    <!--支付-->
    <mt-pay-popup ref="payPopupRef" @confirm="handlePayConfirm"></mt-pay-popup>
  </view>
</template>

<script name="RechargeDeposit" setup>
import { createBondOrder } from '@/subMember/api/index.js';
import { initiationPayments } from '@/utils/tools.js';

const depositFormRef = ref(null);

const payPopupRef = ref(null);

const title = ref('充值保证金');

const unitFormat = (unit) => {
  if (!unit) return '';
  const unitObj = {
    1: '元',
    2: '十',
    3: '百',
    4: '千',
    5: '万',
    6: '十万',
    7: '百万',
    8: '千万',
    9: '亿'
  };
  if (unit.length <= 9 && Number(unit) >= 1) {
    return unitObj[unit.length];
  } else {
    return '';
  }
};

const depositForm = ref({
  info: {
    paymentChannel: undefined,
    orderAmount: undefined,
    payVoucher: '[]'
  }
});

const rules = ref({
  'info.orderAmount': [
    {
      type: 'string',
      required: true,
      message: '请输入金额',
      trigger: ['blur', 'change']
    }
  ]
});

const handleSubmit = () => {
  depositFormRef.value.validate().then((valid) => {
    if (valid) {
      payPopupRef.value.open({
        amount: depositForm.value.info.orderAmount * 1000
      });
    }
  });
};

const handlePayConfirm = async (payType) => {
  const params = JSON.parse(JSON.stringify(depositForm.value.info));

  params.paymentChannel = payType;
  params.payVoucher = payType !== 3 ? undefined : params.payVoucher;
  params.orderAmount = params.orderAmount * 1000;
  if (payType === 1 || payType === 2) {
    const { data } = await createBondOrder(params);
    const info = data.orderStr;
    await initiationPayments(payType, info);
    uni.redirectTo({
      url: '/pages/my/index'
    });
  } else if (payType === 3) {
    // await initiationPayments(payType, '', `/pages/common/waterPay?type=bound&orderAmount=${depositForm.value.info.orderAmount}`);
    uni.redirectTo({
      url: `/pages/common/waterPay?type=bound&orderAmount=${depositForm.value.info.orderAmount}`
    });
  } else if (payType === 100) {
    await initiationPayments(payType);
  }
};

// 跳转到充值记录
const handleOpenRecord = () => {
  uni.navigateTo({
    url: '/subBond/pages/rechargeRecord'
  });
};
</script>

<style lang="scss" scoped>
.deposit-container {
  background: #f7f7f7;
}

:deep(.uni-input-input) {
  font-size: 80rpx;
}

:deep(.uni-input-placeholder) {
  font-size: 40rpx;
}
</style>
